<template>
  <div class="group-management">
    <div class="left">
      <Tree key="2" :data="baseData" @on-select-change="treeChange" :render="renderContent"></Tree>
    </div>
    <div class="right">
      <base-form :formList="formList"></base-form>
      <div class="table">
        <div class="add-btn">
          <Button type="success" class="btn-save" @click="add">添加</Button>
        </div>
        <IviewTable
          :height="600"
          border
          :page="page"
          :columns="tableColumns"
          :data="tableData"
          :maxheight="'350'"
          backStage
        ></IviewTable>
      </div>
    </div>
    <validate-modal-form
      ref="roleModal"
      title="添加组织"
      @setForm="addGroup"
      :formValidate="formValidate"
      :ruleValidate="ruleValidate"
      :formList="modalFormList"
    ></validate-modal-form>
    <validate-modal-form
      ref="roleUpdateModal"
      title="编辑组织"
      @setForm="updateRole"
      :formValidate="formValidate"
      :ruleValidate="ruleValidate"
      :formList="modalFormList"
    ></validate-modal-form>
  </div>
</template>

<script>
import IviewTable from '_c/iview/IviewTable'
import baseForm from '@/components/baseForm'
import validateModalForm from '_c/validateModalForm'
import axios from 'axios'
export default {
    name: 'groupManagement',
    components: {
        baseForm,
        IviewTable,
        validateModalForm
    },
    data() {
        return {
            addGroupModal:false,
            formList: [
                {
                    label: '组织名称',
                    type: 'input',
                    model: 'groupName',
                },
            ],
            formValidate: {
                title: '',
                description: '',
                landLine: '',
                parentId:null,
            },
            ruleValidate: {
                title: [{ required: true, message: '组织名称不能为空', trigger: 'blur' }],
                // parentId: [{ required: false, message: '上级组织不能为空', trigger: 'blur' }],
                description: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
            },
            modalFormList: [
                {
                    type: 'input',
                    label: '组织名称',
                    model: 'title',
                    placeholder: '请输入组织名称',
                },
                {
                    type: 'selectTree',
                    label: '上级组织',
                    model: 'parentId',
                    options:[],
                    placeholder: '请选择上级组织',
                },
                {
                    type: 'input',
                    label: '负责人',
                    model: 'description',
                    placeholder: '请输入负责人',
                },
                {
                    type: 'input',
                    label: '联系电话',
                    model: 'landLine',
                    placeholder: '请输入联系电话',
                },
            ],
            page: {
                current: 1,
                pageSize: 40,
                total: 0,
            },
            tableData: [],
            tableColumns: [
                {
                    title: '组织名称',
                    key: 'account',
                },
                {
                    title: '上级组织',
                    key: 'userName',
                },
                {
                    title: '负责人',
                    key: 'role',
                },
                {
                    title: '联系电话',
                    key: 'phone',
                },
                {
                    title: '操作',
                    key: 'action',
                    //   fixed: 'right',
                    width: 120,
                    render() {
                        return `<i-button type="text" size="small">编辑</i-button><i-button type="text" size="small">禁用</i-button>`
                    },
                },
            ],
            baseData: [],
            buttonProps: {
                type: 'text',
                size: 'small',
            }
        }
    },
    mounted(){
        this.getGroup()
    },
    methods:{
        renderContent (h, { root, node, data }) {
            return h('div', {
                style: {
                    display: 'inline-block',
                    width: '100%'
                }
            }, [
                h('span', [
                    // h('Icon', {
                    //     props: {
                    //         type: 'ios-paper-outline'
                    //     },
                    //     style: {
                    //         marginRight: '8px'
                    //     }
                    // }),
                    h('span', data.title)
                ]),
                h('span', {
                    style: {
                        display: 'inline-block',
                        float: 'right',
                        // marginLeft: '32px',
                        width:'100px',
                        textAlign:'right'
                    },
                    class:['tree-set']
                }, [
                    h('Button', {
                        props: Object.assign({}, this.buttonProps, {
                            icon: 'ios-create'
                        }),
                        style: {
                            marginRight: '8px'
                        },
                        on: {
                            click: () => { this.openUpdateRole(data) }
                        }
                    }),
                    h('Button', {
                        props: Object.assign({}, this.buttonProps, {
                            icon: 'ios-remove'
                        }),
                        on: {
                            click: () => { this.removeGroup(data) }
                        }
                    })
                ])
            ]);
        },
        openUpdateRole(data){
            console.log(data)
            for (const key in data) {
                this.formValidate[key] = data[key]
            }
            this.$refs.roleUpdateModal.status = true
        },
        updateRole(data){
            console.log('data',data)
            this.$api.account.updateGroup(data,[data.id],{loading:true}).then(res=>{
                this.$Message.success('编辑成功')
                this.getGroup()
                this.$refs.roleUpdateModal.status = false
            })
            
        },
        removeGroup(data){
            this.$Modal.confirm({
                title: '提示',
                content: `您确定删除 “${data.title}” 吗？`,
                onOk: () => {
                    this.$api.account.deleteGroup({}, [data.id]).then((res) => {
                        this.$Message.info('删除成功')
                        this.getGroup()
                    })
                },
                onCancel: () => {
                    //   this.$Message.info('取消')
                },
            })
        },
        add(){
            for (const key in this.formValidate) {
                this.formValidate[key] = ''
            }
            this.$refs.roleModal.status = true
        },
        addGroup(data){
            this.$api.account.addGroup(data).then(res=>{
                this.$refs.roleModal.status = false
                this.getGroup()
            })
        },
        getGroup(){
            // this.baseData.push = []
            this.$api.account.getGroup().then(res=>{
                // this.baseData.push(res)
                // this.baseData[0] = res
                this.$set(this.baseData,0,res)
                console.log(this.baseData)
                this.baseData[0].expand = true
                this.modalFormList[1].options = JSON.parse(JSON.stringify(this.baseData))
                this.getGroupList(res)
            })
        },
        getGroupList(data){
            // this.modalFormList[1].options =[]
            this.$api.account.getGroupList({},[data.id],{loading:true}).then(res=>{
                this.tableData = res.records
            })
            // this.$api.account.getLastGroup({},[data.id]).then(res=>{
            //     let obj = {
            //         name:res.category,
            //         ...res
            //     }
            //     // this.modalFormList[1].options.push(obj)
            // })
        },
        treeChange(node,data){
            console.log(data)
            this.getGroupList(data)
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.ivu-tree{
  flex-direction:inherit!important;
}
 /deep/.tree-set{
   position: absolute;
   right: 80px;
  }
.group-management {
  display: flex;
  justify-content: space-around;
  .left {
    width: 420px;
    background: #ffffff;
    padding: 40px 0 0 40px;
  }
  .right {
    // width: 1200px;
    flex: 0.99;
    background: #ffffff;
    padding-top: 20px;
    .table {
      padding: 20px 20px 0 20px;
      box-sizing: border-box;
      /deep/.i-page.fixed {
        position: absolute;
        bottom: -60px;
      }
      .add-btn{
        display: flex;
        justify-content: flex-end;
        margin-bottom: 10px;
        .btn-save{
          margin: 0;
        }
      }
    }
  }
}
</style>
